<html>
  <head>
    <!-- deck.gl standalone bundle -->
    <script src="https://unpkg.com/deck.gl@^8.1.0/dist.min.js"></script>

    <!-- Mapbox dependencies -->
    <script src="https://unpkg.com/three/build/three.min.js"></script>
    <script src="https://unpkg.com/@here/harp.gl/dist/harp.js"></script>

    <style type="text/css">
      body {margin: 0; padding: 0;}
      #container {width: 100vw; height: 100vh; position: relative;}
      #container > canvas {position: absolute; width: 100%; height: 100%;}
    </style>
  </head>

  <body>
    <div id="container">
      <canvas id="map-canvas"></canvas>
      <canvas id="deck-canvas"></canvas>
    </div>
  </body>

  <script type="text/javascript">

// Set your API key here
const API_KEY = ''; // eslint-disable-line

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

const INITIAL_VIEW_STATE = {
  latitude: 51.47,
  longitude: 0.45,
  zoom: 4,
  bearing: 0,
  pitch: 30
};

function updateMapCamera(mapView, viewState) {
  const coords = new harp.GeoCoordinates(viewState.latitude, viewState.longitude);
  const dist = harp.MapViewUtils.calculateDistanceFromZoomLevel({
    focalLength: mapView.focalLength},
    viewState.zoom + 1
  );
  mapView.lookAt(coords, dist, viewState.pitch, viewState.bearing);
  mapView.zoomLevel = viewState.zoom + 1;
}

const map = new harp.MapView({
  canvas: document.getElementById('map-canvas'),
  theme: 'https://unpkg.com/@here/harp-map-theme@latest/resources/berlin_tilezen_night_reduced.json',
  // Match deck.gl's FOV = Math.atan(1/3) * 2 / Math.PI * 180
  fovCalculation: {fov: 36.87, type: 'fixed'}
});

const omvDataSource = new harp.OmvDataSource({
  baseUrl: 'https://vector.hereapi.com/v2/vectortiles/base/mc',
  apiFormat: harp.APIFormat.XYZOMV,
  styleSetName: 'tilezen',
  authenticationCode: API_KEY,
  authenticationMethod: {
      method: harp.AuthenticationMethod.QueryString,
      name: 'apikey'
  }
});

map.addDataSource(omvDataSource);
updateMapCamera(map, INITIAL_VIEW_STATE);

const deckgl = new deck.Deck({
  canvas: 'deck-canvas',
  
  // Synchronize deck camera and map camer
  onViewStateChange: ({viewState}) => updateMapCamera(map, viewState),
  onResize: ({width, height}) => map.resize(width, height),

  initialViewState: INITIAL_VIEW_STATE,
  controller: true,

  layers: [
    new deck.GeoJsonLayer({
      id: 'airports',
      data: AIR_PORTS,
      // Styles
      filled: true,
      pointRadiusMinPixels: 2,
      pointRadiusScale: 2000,
      getRadius: f => (11 - f.properties.scalerank),
      getFillColor: [200, 0, 80, 180],
      // Interactive props
      pickable: true,
      autoHighlight: true,
      onClick: info => info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
    }),
    new deck.ArcLayer({
      id: 'arcs',
      data: AIR_PORTS,
      dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
      // Styles
      getSourcePosition: f => [-0.4531566,51.4709959], // London
      getTargetPosition: f => f.geometry.coordinates,
      getSourceColor: [0, 128, 200],
      getTargetColor: [200, 0, 80],
      getWidth: 1
    })
  ]
});
  </script>
</html>